<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
      width: 300px;
      height: 200px;
      background-color: skyblue;
      /* 网格布局 */
      display: inline-grid;
      /* 定义3行，每行高为50px */
      grid-template-rows: repeat(3, 50px);
      /* 定义3列，列宽自动 */
      grid-template-columns: repeat(3, auto);
      margin: 100px;
      /* 内容区域在容器中的垂直和水平对齐方式 */
      /* place-content: space-between space-between; */
      place-content: space-evenly space-evenly;
    }
    .grid-item {
      padding: 10px;
      font-size: 30px;
      color: red;
    }
    .grid-item:nth-child(n) {
      background-color: pink;
    }
    .grid-item:nth-child(2n) {
      background-color: khaki;
    }
  </style>
<body>
    <!-- 
        TIP

        justify-content属性设置整个内容区域在容器里面的水平位置
        align-content属性是整个内容区域的垂直位置。
        place-content属性是align-content 属性和justify-content属性的合并简写形式

        start	        默认值，对齐容器的左边框
        end	            对齐容器的右边框
        center	        容器内部水平居中。
        stretch	        单元格大小没有指定时，拉伸宽占据整个网格容器。
        space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
        space-between	项目与项目的间隔相等，项目与容器边框之间没有间隔。
        space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
    -->

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
      </div>
</body>
</html>